<template>
  <div class="app-container">
  <div class="filter-container">
        <el-button type="primary" @click="refreshClick()">刷新</el-button>
        
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="保单号">
        <template slot-scope="scope">
          <span>{{ scope.row.insurancenumber }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="出单日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="商业险">
        <template slot-scope="scope">
          <span>{{ scope.row.commerce }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="交强险">
        <template slot-scope="scope">
          <span>{{ scope.row.compulsory }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="车船税">
        <template slot-scope="scope">
          <span>{{ scope.row.vvtax }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="续保赠送">
        <template slot-scope="scope">
          <span>{{ scope.row.give }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="保费合计">
        <template slot-scope="scope">
          <span>{{ scope.row.totalmoney }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="实收总计">
        <template slot-scope="scope">
          <span>{{ scope.row.actualmoney }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="制单人">
        <template slot-scope="scope">
          <span>{{ scope.row.guider }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state }}</span>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />

<!-- 维修工单详情 -->
<el-dialog :title="dialogDetails.title" :visible.sync="dialogDetails.visible"  width="900px">
    <div class="ci">
        
        <div class="item hauto ld">
            <fieldset>
            <legend>车辆信息</legend>
            <div class="fd-content">
                <div class="fd-item">
                    <span class="name">车牌号码：</span>
                    <span class="value">
                        <el-input clearable v-model="dialogDetails.data.licenseplate" placeholder="" style="width:220px;" ></el-input>
                    </span>
                    <span class="name">具体车型：</span>
                    <span class="value">
                        <el-input clearable v-model="dialogDetails.data.carname" placeholder="" style="width:220px;" ></el-input>
                    </span>
                </div>
                <div class="fd-item">
                    <span class="name">车身颜色：</span>
                    <span class="value">
                        <el-input clearable v-model="dialogDetails.data.carcolor" placeholder="" style="width:220px;" ></el-input>
                    </span>
                    <span class="name">车架号：</span>
                    <span class="value">
                        <el-input  clearable v-model="dialogDetails.data.vincode" placeholder="" style="width:220px;" ></el-input>
                    </span>
                </div>
                <div class="fd-item">
                    <span class="name">发动机号：</span>
                    <span class="value">
                        <el-input clearable v-model="dialogDetails.data.enginenumber" placeholder="" style="width:220px;" ></el-input>
                    </span>
                    <span class="name">购车日期：</span>
                    <span class="value">
                        <el-date-picker v-model="dialogDetails.data.buydate" type="date"  placeholder="选择日期"></el-date-picker>
                    </span>
                    
                </div>
                <div class="fd-item">
                    <span class="name" style="padding-left:10px;">是否本店购买：</span>
                    <span>
                        <el-switch v-model="dialogDetails.data.buyinshop" active-color="#13ce66" inactive-color="#aaaaaa"></el-switch>
                    </span>
                </div>
            </div>
            </fieldset>
        </div>
        <div class="item hauto ld">
              <fieldset>
                <legend>客户基本信息</legend>
                <div class="fd-content">
                    <div class="fd-item">
                        <span class="name">客户姓名：</span>
                        <span><el-input clearable v-model="dialogDetails.data.customername" placeholder="" style="width:200px;" ></el-input></span>
                    </div>
                    <div class="fd-item">
                        <span class="name">性别</span>
                        <span>
                            <el-radio-group v-model="dialogDetails.data.customergender">
                                <el-radio-button label="男"></el-radio-button>
                                <el-radio-button label="女"></el-radio-button>
                            </el-radio-group>
                        </span>
                    </div>
                    <div class="fd-item">
                        <span class="name">微信：</span>
                        <span><el-input clearable v-model="dialogDetails.data.customerWeixin" placeholder="" style="width:200px;" ></el-input></span>
                    </div>
                    <div class="fd-item">
                        <span class="name">客户类型：</span>
                        <span>
                            <el-select v-model="dialogDetails.data.customertype" clearable placeholder="--" style="width: 130px;">
                                <el-option 
                                v-for="(item,index) in selectOptions.customertype"
                                :key="index"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </span>
                    </div>
                    
                </div>
              </fieldset>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetails.visible = false">取 消</el-button>
        <el-button type="primary" @click="dgEditSaveClick()" :loading="dialogDetails.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 维修工单详情 -->

<!-- 维修进度详情 -->
<el-dialog :title="dialogProcess.title" :visible.sync="dialogProcess.visible"  width="900px">
    <div class="ci">
        <div class="item">
            <span class="name">当前进度：</span>
            <span class="value">
                {{'未知'}}
            </span>
        </div>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogProcess.visible = false">关 闭</el-button>
    </div>
</el-dialog>
<!-- end 维修进度详情 -->

<!-- 费用信息详情 -->
<el-dialog :title="dialogFeeDetails.title" :visible.sync="dialogFeeDetails.visible"  width="900px">
    <div class="ci">
        
        <div class="item hauto ld">
            <fieldset>
            <legend>工时费用</legend>
            <div class="fd-content">
                <div class="fd-item">
                    <span class="name">项目数量：</span>
                    <span class="value">
                        <el-input clearable v-model="dialogFeeDetails.data.worktime.count" placeholder="" style="width:220px;" ></el-input>
                    </span>
                    <span class="name">工时应收：</span>
                    <span class="value">
                        <el-input clearable v-model="dialogFeeDetails.data.worktime.totalmoney" placeholder="" style="width:220px;" ></el-input>
                    </span>
                </div>
                <div class="fd-item">
                    <span class="name">工时折让：</span>
                    <span class="value">
                        <el-input clearable v-model="dialogFeeDetails.data.worktime.discount" placeholder="" style="width:220px;" ></el-input>
                    </span>
                    <span class="name">工时实收：</span>
                    <span class="value">
                        <el-input  clearable v-model="dialogFeeDetails.data.worktime.actualmoney" placeholder="" style="width:220px;" ></el-input>
                    </span>
                </div>
                
            </div>
            </fieldset>
        </div>
        <div class="item hauto ld">
            <fieldset>
            <legend>配件费用</legend>
            <div class="fd-content">
                <div class="fd-item">
                    <span class="name">配件数量：</span>
                    <span class="value">
                        <el-input clearable v-model="dialogFeeDetails.data.parts.count" placeholder="" style="width:220px;" ></el-input>
                    </span>
                    <span class="name">配件应收：</span>
                    <span class="value">
                        <el-input clearable v-model="dialogFeeDetails.data.parts.totalmoney" placeholder="" style="width:220px;" ></el-input>
                    </span>
                </div>
                <div class="fd-item">
                    <span class="name">配件折让：</span>
                    <span class="value">
                        <el-input clearable v-model="dialogFeeDetails.data.parts.discount" placeholder="" style="width:220px;" ></el-input>
                    </span>
                    <span class="name">配件实收：</span>
                    <span class="value">
                        <el-input  clearable v-model="dialogFeeDetails.data.parts.actualmoney" placeholder="" style="width:220px;" ></el-input>
                    </span>
                </div>
                
            </div>
            </fieldset>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFeeDetails.visible = false">关 闭</el-button>
    </div>
</el-dialog>
<!-- end 费用信息详情 -->


  </div>
</template>

<script>
import * as carmanageApi from '@/api/aftersale/carmanage'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'

export default {
    name:'carlist2',
    components: { Pagination },
    data(){
        return{
          search:{ 
              number:'',
              customer:'',
              phone:'',
              daterange:'',
          },
          listQuery: {
                page: 1,
                rows: 20,
                name:'',
                phone:'',
                state:-1,
                daterange:''
          },
          list:null,
          listLoading:false,
          total:0,
          selectOptions:{
            customertype:[
                {label:'公司',value:1},
                {label:'个人',value:2},
            ]
          },

          dialogDetails:{
              visible:false,
              saveloading:false,
              title:'维修工单详情',
              data:{
                  id:'',
                  licenseplate:'',
                  carname:'',
                  carcolor:'',
                  vincode:'',
                  enginenumber:'',
                  buydate:'',
                  buyinshop:false,
                  customername:'',
                  customerphone:'',
                  customergender:'',
                  customerWeixin:''

              }
          },
          dialogProcess:{
            visible:false,
            saveloading:false,
            title:'维修工单进度',
            data:{

            }
          },
          dialogFeeDetails:{
            visible:false,
            saveloading:false,
            title:'费用信息详情',
            data:{
                worktime:{},
                parts:{}
            }
          },
          
        }
    },
    created(){
        var that=this;
        //初始化下拉菜单
        //enumHelper.initOptions(that.selectOptions.salesState,enumHelper.presale.salesState);
        that.fetchData();
    },
    filters:{
      parseHandingType(val){
        return ['无','已办理','未办理'][val];
      },
      parsePayType(val){
        return enumHelper.presale.payType.getName(val);
      },
      parseSalesState(val){
        return enumHelper.presale.salesState.getName(val);
      }

    },
    methods:{
        fetchData(){
          var that=this;
            carmanageApi.getInsuranceList({}).then(res=>{
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
              }
            })
        },
        refreshClick(){
          this.fetchData();
        },
        
        rowDetailsClick(id){
          var that=this;
          var selectItem=that.list.filter(o=>o.id==id)[0];
          that.dialogDetails.visible=true;
          for(var key in that.dialogDetails.data){
              if(that.dialogDetails.data.hasOwnProperty(key)){
                  that.dialogDetails.data[key]=selectItem[key];
              }
          }
        },
        rowProcessClick(id){
            this.dialogProcess.visible=true;
        },
        rowFeeDetailsClick(id){
            this.dialogFeeDetails.visible=true;
        }
    }
}
</script>

<style scoped>

</style>